<template>
  <view>
    <u-navbar :title="item.name" autoBack fixed placeholder></u-navbar>
    <view class="content" :style="{'--seat-width': `${seatWidth}px`, '--seat-height': `${seatHeight}`}">
      <u-notice-bar text="请自觉遵守自习室规定，请勿影响他人" :speed="0"></u-notice-bar>
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
			style="top: calc(44px + var(--status-bar-height) + 50px);">
        <view class="items">
          <view :class="{ 'icon-seat-checked': index == cur, 'icon-seat': index != cur,  'is-empty': seat.isEmpty}" 
          v-for="(seat, index) in item.seats" :key="index" 
          @click="selectSeat(seat, index)"></view>
        </view>
      </z-paging>
      <transition name="slide">
        <view class="bottom-btn" v-if="isChecked" @click="goAddPage()">
          <text>立即预约</text>
        </view>
      </transition>
    </view>
  </view>
</template>

<script>
import {
  studyDetail
} from '@/api/study'
export default {
  data() {
    return {
      item: {},
      cur: -1,
      curSeat: {},
      seatWidth: 0,
      isChecked: false,
    }
  },
  computed: {
    seatHeight() {
      return this.isChecked ? '60px' : 0
    }
  },
  created() {
    this.seatWidth = (uni.getWindowInfo().windowWidth - 140) / 6
  },
  methods: {
    selectSeat(seat, index) {
      this.cur = index
      this.curSeat = seat
      this.isChecked = true
    },
    onRefresh() {
      studyDetail(this.id).then(res => {
        if(res.code === 200) {
          this.item = res.data
          this.$set(this.item, 'seats', [])
          for(let i = 0; i < res.data.volume; i++) {
            const no = i < 9 ? '0' + (i + 1) : (i + 1)
            this.item.seats.push({
              no,
              isEmpty: res.data.records.findIndex(item => {
                return item.seat == no
              }) == -1
            })
          }
        }
        this.$refs.paging.complete()
      }).catch(() => {
        this.$refs.paging.complete()
      })
    },
    goAddPage() {
      this.curSeat.sid = this.item.id
      uni.navigateTo({
        url: `/pages/menus/reservation/add?item=${JSON.stringify(this.curSeat)}`
      })
    }
  },
  onLoad(options) {
    this.id = options.id
    this.onRefresh()
  }
}
</script>

<style scoped lang="scss">
  .content {
    padding: 0;
  }
  .items {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 10px;
    padding-bottom: var(--seat-height);
    box-sizing: border-box;
    background-color: #ffffff;
    overflow-y: auto;

    view {
      width: var(--seat-width);
      font-size: 24px;
      margin: 10px;
      text-align: center;
      line-height: 24px;
    }

    .icon-seat {
      color: #ff1111;

      &.is-empty {
        color: #666666;
      }
    }
    
    .icon-seat-checked {
      color: $primary-theme-color;
    }
  }

  .bottom-btn {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -2px 4px rgba($color: #000000, $alpha: .3);
    transition: all .5s;

    text {
      display: block;
      width: 80%;
      height: 32px;
      // background-color: $primary-theme-color;
      border-radius: 4px;
      color: #000000;
      text-align: center;
      font-size: 16px;
      line-height: 32px;
      letter-spacing: 2px;
    }
  }

  .slide-enter, .slide-level-to {
    bottom: -50px;
  }
  
  .slide-enter-to, .slide-level {
    bottom: 0;
  }
</style>